<template>
    <div class="edit-table-column f-s">
        <template v-if='!inEdit'>
            <slot name='content'>
                <template v-if="editType == 'single-upload'">
                    <o-upload v-model='result' :width='50' @change='save'></o-upload>
                </template>
                <template v-else>
                    {{result}}
                </template>
            </slot>
            <el-tooltip effect="dark" content="编辑" placement="top-start" v-if="editType != 'single-upload'">
                <i class="el-icon-edit" @click='toggle'></i>
            </el-tooltip>
        </template>
        <template v-else>
            <!-- 不同的编辑类型 -->
            <template v-if="editType == 'input'">
                <el-input v-model='result' @keyup.enter.native="save"></el-input>
            </template>
            <template v-if="editType == 'select'">
                <o-select v-model="result" :code='code' :multiple='multiple' :lazy='false'></o-select>
            </template>
            <el-tooltip effect="dark" content="保存编辑" placement="top-start">
                <i class="el-icon-success" @click='save'></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="取消" placement="top-start">
                <i class="el-icon-error" @click='cancel'></i>
            </el-tooltip>
        </template>
    </div>
</template>

<script>
    import {toast} from '@u';
    export default {
        props : {
            value : {
                type : String | Number | Array | Boolean,
                default : null
            },
            //要编辑的键名
            editKey : {
                type : String,
                default : null,
                required : true
            },
            //编辑类型
            editType : {
                type : String,
                default : 'input'
            },
            //当编辑类型为select/cascader时，需要传入的code
            code : {
                type : String,
                default : ''
            },
            //当编辑类型为select/cascader时，是否可以多选
            multiple : {
                type : Boolean,
                default : false
            }
        },
        watch : {
            value : {
                handler : function (n, o) {
                    if (!o) {
                        this.oldValue = n[this.editKey];
                    }
                    this.result = n[this.editKey];
                },
                immediate : true
            }
        },
        data () {
            return {
                oldValue : null,
                result : null,
                inEdit : false,//是否在编辑中
            }
        },
        methods : {
            toggle () {
                this.inEdit = !this.inEdit;
            },
            cancel () {
                this.inEdit = false;
                this.result = this.oldValue;
                this.$emit('input', {
                    ...this.value,
                    [this.editKey] : this.oldValue
                });
            },
            save () {
                if (!this.result) {
                    toast('请填写要修改的值');
                    return;
                }
 
                if (this.editType != 'select') {
                    if (JSON.stringify(this.oldValue) == JSON.stringify(this.result)) {
                        toast('没有任何修改，保存失败', 'error');
                        return;
                    }
                }
                
                //修改成功
                this.$emit('input', {
                    ...this.value,
                    [this.editKey] : this.result
                });
                this.oldValue = JSON.parse(JSON.stringify(this.result));
                this.inEdit = false;

                this.$emit('change')
            }
        }
    }
</script>

<style lang='less' scoped>
    .edit-table-column {
        cursor: pointer;
        [class^=el-icon-], .el-tooltip {
            margin-left: 10px;
        }
    }
</style>